---
layout: example
description: How to create custom markers and set custom marker images with Mapbox.js, our open source JavaScript libray.
categories: example/v1.0.0
version: v1.0.0
title: Custom marker icons
description: Setting a custom marker image.
tags:
  - ui
---
<div id='map'></div>
<script>
var map = L.mapbox.map('map')
    .setView([40, -74.50], 8)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

var myLayer = L.mapbox.featureLayer().addTo(map);

var geoJson = {
  type: 'FeatureCollection',
  features: [{
      "type": "Feature",
      "geometry": {
          "type": "Point",
          "coordinates": [-75.00, 40]
      },
      "properties": {
          "title": "Small astronaut",
          "icon": {
              "iconUrl": "{{site.baseurl}}/assets/images/astronaut1.png",
              "iconSize": [50, 50], // size of the icon
              "iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
              "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
              "className": "dot"
          }
      }
  }, {
      "type": "Feature",
      "geometry": {
          "type": "Point",
          "coordinates": [-74.00, 40]
      },
      "properties": {
          "title": "Big astronaut",
          "icon": {
              "iconUrl": "{{site.baseurl}}/assets/images/astronaut2.png",
              "iconSize": [100, 100],
              "iconAnchor": [50, 50],
              "popupAnchor": [0, -55],
              "className": "dot"
          }
      }
  }]
};

// Set a custom icon on each marker based on feature properties.
myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;

    marker.setIcon(L.icon(feature.properties.icon));
});

// Add features to the map.
myLayer.setGeoJSON(geoJson);
</script>
